<template>
  <div class="sm-sman-smanagementGoods">
    <div class="sm-sman-leftInfo">
      <div>工作包信息</div>
      <ul>
        <li v-for="(value, index) in gzbInfo" :key="index">
          <p>待拆分物料信息</p>
          <p>
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            分拣数量：<span style="margin-left: 3px">{{ value.packageCount }}</span>
          </p>
          <p>
            待拆分数量：
            <span style="fontsize: 20px">
              <el-input
                @blur="blurNum(value.artChangeNum, index)"
                ref="smwuinput"
                size="mini"
                v-model="value.artChangeNum"
                placeholder="请输入物料数量"
                @keyup.enter.native="mrprtEnter"
              ></el-input>
            </span>
          </p>
          <p v-if="isConfirm==false">物料确认状态：<span style="margin-left:3px" ref="materialStatus">未确认</span></p>
          <p v-else="isConfirm==true">物料确认状态：<span style="margin-left:3px;color:blue" ref="materialStatus">已确认</span></p>
        </li>
      </ul>
    </div>
    <div class="sm-sman-rightInfo">
      <div>缓存箱信息</div>
      <ul>
        <li v-for="(value, index) in unpackInfo" :key="index">
          <p>待拆包物料信息</p>
          <p>
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            拆包数量：<span style="margin-left: 3px">{{ value.artChangeNum }}</span>
          </p>
          
          <!-- <p>
            待分拣数量：
            <span style="fontsize: 20px">
              <el-input
                @blur="blurNum(value.outQty, index)"
                ref="saomaInput"
                size="mini"
                v-model="value.outQty"
                placeholder="请输入物料数量"
              ></el-input>
            </span>
          </p> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "SortingManagementGoods",
  data() {
    return {
      hcxInfo: [],
      gzbInfo: [],
      qqlist: [],
      chengeOne:[],
      unpackInfo:[],
      isConfirm:false
    };
  },
  methods: {
    // input聚焦
    blurNum(num, index) {
      console.log(num, index);
      for (let i = 0; i < this.gzbInfo.length; i++) {
        this.qqlist = this.gzbInfo;
        if (index == i) {
          this.qqlist[i].outQty = num;
          this.chengeOne = this.qqlist[i]
        }
      }
      // this.gzbInfo.push(this.chengeOne)
      this.$bus.$emit('WuGzbListInfo',this.unpackInfo)
    },
    // 物料输入框回车事件
    mrprtEnter(){
      this.$bus.$emit('smWuMatiToBtninput','focus')
    }
  },
  mounted() {
      // 接收首页传来的缓存箱信息
      this.$bus.$on("smWuSendHcxInfos", (e) => {
        this.hcxInfo = e;
        console.log(e);
      });
      //
      this.$bus.$on("smWuSendGzbInfo", (e) => {
        this.gzbInfo = e;
      });
      // 接收首页物料扫码确认的下标 smsmaninput
      this.$bus.$on('smWuMaterialNumber',(e)=>{
        this.$nextTick(()=>{
          this.$refs.smwuinput[e].focus()
          console.log(this.$refs.smwuinput)
        }) 
      })
      // 接收首页物料扫码确认的下标 smsmaninput
      this.$bus.$on('unpcakInfoAffirm',(e)=>{
        //yebo 新增 扫条码显示工作包信息
        for(var i=0;i<this.unpackInfo.length;i++){
          if(this.unpackInfo[i].barcode==this.gzbInfo[e].barcode){
            return ;
          }
           
        }
        this.gzbInfo[e].outQty = this.gzbInfo[e].artChangeNum;
        this.unpackInfo.push(this.gzbInfo[e]);
        //已经确认物料个数+1
        this.cheakMaterialNum++
        this.$bus.$emit('WuGzbListInfo',this.unpackInfo)
      })
    }
}
</script>
<style scoped>
.sm-sman-smanagementGoods {
  width: 100%;
  /* background: red; */
}
.sm-sman-leftInfo {
  float: left;
  width: 50%;
  display: none;
  /* height: 300px; */
  /* border: 1px solid black; */
  /* background: #3375d7; */
}
.sm-sman-leftInfo ul li {
  float: left;
  padding: 0 10px;
  width: 280px;
  height: 250px;
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-leftInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-leftInfo ul li p {
  margin-top: 10px;
}

.sm-sman-rightInfo {
  float: right;
  width: 50%;
  /* background-color: aquamarine; */
  /* height: 400px; */
  display: none;
}
.sm-sman-rightInfo ul li {
  float: left;
  padding: 0 5px;
  width: 290px;
  height: 250px;
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-rightInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-rightInfo ul li p {
  margin-top: 10px;
}
.el-input {
  width: 150px;
  font-size: 18px;
}
</style>